<!--
 * by: wei_sc2
 * time: 2020-09-03
 * desc: 安全事件主页面
-->
<template>
  <div class="log-management">
    <fks-query-page
      v-loading="loading"
      :total="total"
      :page-size.sync="size"
      :current-page.sync="page"
      :page-sizes="[15, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      highlight-current-row
      :table-name="LANG.LOG_SAFE_LIST"
      :data="list"
      @query="getData"
      @sort-change="sortHandler"
      @clear="clear"
    >
      <template slot="search">
        <fks-search-item :label="LANG.LOG_TIME">
          <fks-date-picker
            v-model="createTimeStart"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="month"
            :clearable="false"
          />
        </fks-search-item>
        <fks-search-item :label="LANG.LOG_TYPE">
          <fks-select
            v-model="logType"
            style="width: 100%"
            clearable
            :placeholder="LANG.SAFE_TYPE"
            @change="changeLogLevel"
          >
            <fks-option
              v-for="item in safetyIncident"
              :key="item.code"
              :value="item.code"
              :label="item[$lang]"
            />
          </fks-select>
        </fks-search-item>
        <fks-search-item :label="LANG.LOG_LEVEL">
          <fks-select
            v-model="level"
            style="width: 100%"
            clearable
            :placeholder="LANG.SAFE_LEVEL"
            @change="changeLogType"
          >
            <fks-option
              v-for="item in logLevel"
              :key="item.code"
              :value="item.code"
              :label="item[$lang]"
            />
          </fks-select>
        </fks-search-item>
        <fks-search-item :label="LANG.LOG_INTERFACE">
          <fks-input
            v-model="requestUri"
            maxlength="50"
            @keyup.enter.native="getData"
          />
        </fks-search-item>
        <fks-search-item :label="LANG.USERNAME">
          <fks-input
            v-model="userName"
            maxlength="50"
            @keyup.enter.native="getData"
          />
        </fks-search-item>
      </template>
      <template>
        <fks-table-column type="index" label="#" align="center" />
        <fks-table-column
          prop="requestUri"
          :label="LANG.LOG_INTERFACE"
          is-link
          header-align="center"
          align="left"
          @link="openDetail"
        />
        <fks-table-column
          prop="serviceName"
          :label="LANG.LOG_SERVICE"
          sortable="custom"
          min-width="45px"
          header-align="center"
          align="center"
        />
        <fks-table-column
          prop="logType"
          :label="LANG.LOG_TYPE"
          min-width="80px"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.logType | transferEnum('safetyIncident') }}
          </template>
        </fks-table-column>
        <fks-table-column
          prop="level"
          :label="LANG.LOG_LEVEL"
          min-width="40px"
          align="center"
        >
          <template slot-scope="scope">
            <fks-tag v-if="scope.row.level == 'info'" :style="{ color: theme }">
              {{ LANG.INFO }}
            </fks-tag>
            <fks-tag v-if="scope.row.level == 'warning'" type="warning">
              {{ LANG.ALERT }}
            </fks-tag>
            <fks-tag v-if="scope.row.level == 'serious'" type="danger">
              {{ LANG.SERIOUS }}
            </fks-tag>
          </template>
        </fks-table-column>
        <fks-table-column
          prop="logData"
          :label="LANG.LOG_DATA"
          min-width="120px"
          header-align="center"
          align="left"
        />
        <fks-table-column
          prop="methodType"
          :label="LANG.REQUEST_TYPE"
          min-width="40px"
        />
        <fks-table-column
          prop="userFullname"
          :label="LANG.USER_FULL_NAME"
          min-width="40px"
        />
        <fks-table-column
          prop="userName"
          align="center"
          :label="LANG.USERNAME"
          min-width="40px"
        />
        <fks-table-column
          prop="createTime"
          sortable="custom"
          :label="LANG.LOG_TIME"
          min-width="65px"
        />
      </template>
    </fks-query-page>
    <fks-dialog title="title" :visible.sync="visible" width="960px">
      <div slot="title">
        <i class="fks-icon-view" />
        {{ LANG.VIEW }}
      </div>
      <div class="drawer-container">
        <fks-form ref="Form" :model="formData" status-icon>
          <fks-form-item
            lead
            :span="12"
            :label="LANG.SERVER_IP"
            prop="serverIp"
          >
            <fks-input v-model="formData.serverIp" readonly />
          </fks-form-item>
          <fks-form-item :span="12" :label="LANG.SERVER_HOST" prop="serverHost">
            <fks-input v-model="formData.serverHost" readonly />
          </fks-form-item>
          <fks-form-item
            lead
            :span="12"
            :label="LANG.LOG_SERVICE"
            prop="serviceName"
          >
            <fks-input v-model="formData.serviceName" readonly />
          </fks-form-item>
          <fks-form-item :span="12" :label="LANG.LOGS_TYPE" prop="logType">
            <fks-input v-model="formData.logType" readonly />
          </fks-form-item>
          <fks-form-item
            lead
            :span="12"
            :label="LANG.REMOTE_IP"
            prop="remoteIp"
          >
            <fks-input v-model="formData.remoteIp" readonly />
          </fks-form-item>
          <fks-form-item
            :span="12"
            :label="LANG.LOG_INTERFACE"
            prop="requestUri"
          >
            <fks-input v-model="formData.requestUri" readonly />
          </fks-form-item>
          <fks-form-item :span="12" :label="LANG.METHOD_NAME" prop="methodName">
            <fks-input v-model="formData.methodName" readonly />
          </fks-form-item>
          <fks-form-item
            :span="24"
            :label="LANG.METHOD_CLASS"
            prop="methodClass"
          >
            <fks-input v-model="formData.methodClass" readonly />
          </fks-form-item>
          <fks-form-item :span="24" :label="LANG.USERAGENT" prop="userAgent">
            <fks-input
              v-model="formData.userAgent"
              :rows="3"
              type="textarea"
              readonly
            />
          </fks-form-item>
          <fks-form-item :span="24" :label="LANG.PARAMS" prop="params">
            <fks-input
              v-model="formData.params"
              :rows="3"
              type="textarea"
              readonly
            />
          </fks-form-item>
          <fks-form-item :span="24" :label="LANG.LOG_DATA" prop="logData">
            <fks-input
              v-model="formData.logData"
              :rows="5"
              type="textarea"
              readonly
            />
          </fks-form-item>
        </fks-form>
      </div>
    </fks-dialog>
  </div>
</template>

<script>
import { getAllSecurityLog, getSecurityLog } from './api'
import * as types from '@/store/Getter/getterTypes.js'
import { ENUM } from '@/store/State/stateTypes'
export default {
  name: 'SafetyIncident',
  data() {
    return {
      list: [],
      createTime: '',
      logType: '',
      level: '',
      txId: '',
      env: '',
      userFullname: '',
      userName: '',
      serverIp: '',
      serverHost: '',
      remoteIp: '',
      userAgent: '',
      tenantId: '',
      requestUri: '',
      methodType: '',
      methodClass: '',
      methodName: '',
      params: '',
      logData: '',
      createTimeEnd: '',
      createTimeStart: '',
      serviceName: '',
      page: 1,
      size: 20,
      sort: '',
      columnName: '',
      total: 0,
      loading: false,
      visible: false,
      formData: {
        logType: '',
        env: '',
        serverIp: '',
        serverHost: '',
        remoteIp: '',
        userAgent: '',
        requestUri: '',
        methodType: '',
        methodClass: '',
        methodName: '',
        params: '',
        logData: '',
        serviceName: ''
      }
    }
  },
  computed: {
    safetyIncident() {
      return this.$store.state[ENUM].safetyIncident || []
    },
    logLevel() {
      return this.$store.state[ENUM].logLevel || []
    },
    theme() {
      return this.$store.getters[types.THEME]
    }
  },
  mounted() {
    this.createTimeStart = this.$dayjs(new Date())
      .startOf('month')
      .format('YYYY-MM-DD HH:mm:ss')
    this.getData()
  },
  methods: {
    changeLogLevel(val) {
      if (val) {
        let params = {
          userName: this.userName,
          requestUri: this.requestUri,
          searchValue: this.searchValue,
          logType: val,
          level: this.level,
          page: 1,
          size: this.size,
          createTimeStart: this.createTimeStart,
          createTimeEnd: this.createTimeEnd
        }
        this.getAllSecurityLogList(params)
      }
    },
    changeLogType(val) {
      if (val) {
        let params = {
          userName: this.userName,
          requestUri: this.requestUri,
          searchValue: this.searchValue,
          logType: this.logType,
          level: val,
          page: 1,
          size: this.size,
          createTimeStart: this.createTimeStart,
          createTimeEnd: this.createTimeEnd
        }
        this.getAllSecurityLogList(params)
      }
    },
    //当表格的排序条件发生变化的时候会触发该事件
    sortHandler(data) {
      let params = {}
      if (!data.order) {
        this.sort = ''
        this.columnName = ''
      } else {
        this.sort = data.order == 'ascending' ? 'asc' : 'desc'
        this.columnName =
          data.prop == 'serviceName' ? 'service_Name' : 'create_time'
      }
      params = {
        userName: this.userName,
        requestUri: this.requestUri,
        searchValue: this.searchValue,
        logType: this.logType,
        level: this.level,
        page: this.page,
        size: this.size,
        createTimeStart: this.createTimeStart,
        createTimeEnd: this.createTimeEnd,
        sortType: this.sort,
        columnName: this.columnName
      }
      this.getAllSecurityLogList(params)
    },
    //按条件分页查询数据
    getData() {
      this.loading = true
      this.createTimeEnd = this.$dayjs(this.createTimeStart)
        .endOf('month')
        .format('YYYY-MM-DD HH:mm:ss')
      let data = {
        userName: this.userName,
        requestUri: this.requestUri,
        searchValue: this.searchValue,
        logType: this.logType,
        level: this.level,
        page: this.page,
        size: this.size,
        createTimeStart: this.createTimeStart,
        createTimeEnd: this.createTimeEnd,
        sortType: this.sort,
        columnName: this.columnName
      }
      this.getAllSecurityLogList(data)
    },
    //获取安全事件列表
    getAllSecurityLogList(data) {
      getAllSecurityLog(data)
        .then((res) => {
          if (res.status) {
            this.list = res.data.list
            this.total = res.data.total
          } else {
            this.list = []
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    //打开详情弹窗
    openDetail({ row }) {
      this.visible = true
      getSecurityLog(row.id).then((res) => {
        if (res.status) {
          this.formData = res.data
        }
      })
    },
    //清空搜索条件
    clear() {
      this.userName = ''
      this.requestUri = ''
      this.searchValue = ''
      this.createTimeEnd = this.createTimeEnd = this.$dayjs(
        this.createTimeStart
      )
        .endOf('month')
        .format('YYYY-MM-DD HH:mm:ss')
      this.createTimeStart = this.createTimeStart = this.$dayjs(new Date())
        .startOf('month')
        .format('YYYY-MM-DD HH:mm:ss')
      this.level = ''
      this.logType = ''
      this.page = 1
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
.primary-button {
  font-size: 16px;
}

.log-management {
  position: relative;
  height: 100%;
}
</style>